<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <p>刷新次数: {{ count }}</p>
      <div>
        <router-link to="/">Back</router-link>
      </div>
      <h1 class="text">{{ $route.params.tit }}</h1>
      <router-link v-for="(item, n) in dataList" :key="item.id" class="themore"
        :to="`/player/${item.id}/${item.name}/${setUrl(item.picUrl)}`">
        <div id="num">
          {{ n + 1 }}
        </div>
        <div class="img-warpping">
          <a href="void();"><img :src="item.cover ? item.cover : item.picUrl" alt="" /></a>
        </div>
        <!-- <span></span> -->
        <div class="main" @click="fun()">
          {{ item.name }}
          <!-- <br/> -->
        </div>
        <div class="gray">
          {{ item.artistName }}
        </div>
      </router-link>
      <div ref="loadmore" v-show="this.offset1 < this.ajaxList.length" class="text">加载更多</div>
      <van-loading color="#0094ff" v-if="this.offset1 < this.ajaxList.length" />
      <div v-show="this.offset1 >= this.ajaxList.length" class="text">
        别拉了，没啦
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      dataList: [],
      offset1: 0,
      flag: false,
      ajaxList: [],
      count: 0,
      isLoading: false
    };
  },
  mounted() {
    if (this.$route.params.tit === "mv热榜") {
      this.ajax();
    } else if(this.$route.params.tit === "新碟上架"){
      this.ajax1();
    }
    else {
      this.ajax2();
    }

    // console.log(document.querySelector('.themore'));
    //     this.$nextTick(()=>{
    //      console.log(document.querySelector('.themore'))
    //       console.log(111);
    // });
    let timer = null;
    let winHeight = document.documentElement.clientHeight;
    console.log(winHeight);
    window.onscroll = () => {
      let eleHeight = this.$refs.loadmore.getBoundingClientRect().top; //元素上边到视窗上边的距离
      //节流与防抖
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        if (winHeight > eleHeight && this.offset1 < this.ajaxList.length) {
          console.log(winHeight, eleHeight);
          console.log("more");
          this.flag = true;
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
          });
          setTimeout(() => {
            if (this.$route.params.tit === "mv热榜") {
              this.ajax();
            } else {
              this.ajax1();
            }
          }, 1000);
        }
      }, 300);
    };
    // window.onload = () => {//不管用
    //  console.log(document.querySelector('.themore'))
    //   console.log(111);
    // this.fun()
    // }
  },
  watch: {
    //将watch和$nextTick结合才能使DOM渲染完毕后再执行操作
    dataList: function () {
      this.$nextTick(() => {
        //  console.log(document.querySelector('.themore'))
        //   console.log(111);
        if (this.$route.params.tit === "mv热榜") {
          // this.ajax();
          console.log('nochange');
        } else {
          this.fun();
        }

      });
    },
  },
  methods: {
    setUrl(url) {
      if (url) {
        return encodeURIComponent(url)
      }
      },
      onRefresh() {
        this.offset1 = 0
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
          if (this.$route.params.tit === "mv热榜") {
            this.ajax();
          } else {
            this.ajax1();
          }
        }, 1000);
      },
      fun() {
        console.log(document.querySelector(".themore"));
        document.querySelectorAll(".themore").forEach((item) => {
          item.style.height = "170px";
        });
      },
      ajax(url) {
        url = "/api/top/mv";
        return axios({
          method: "get",
          timeout: 1000 * 30,
          url: url,
          dataType: "json",
        })
          .then((res) => {
            this.dataList = res.data.data.slice(0, (this.offset1 += 10));
            // console.log(this.dataList);
            console.log(this.offset1);
            this.flag = false;
            this.ajaxList = res.data.data
            return res.data.data;
          })
          .catch(function (error) {
            alert("获取失败，请稍后重试");
            console.log(error);
          });
      },
      ajax1(url) {
        url = "http://121.41.51.182:3000/top/album";
        return axios({
          method: "get",
          timeout: 1000 * 30,
          url: url,
          dataType: "json",
          // async: false,
        })
          .then((res) => {
            // console.log(res.data.weekData);
            // this.zzz = res.data.weekData;
            // this.dataList = res.data.weekData
            this.dataList = res.data.weekData.slice(0, (this.offset1 += 20));
            // console.log(this.dataList.weekData);
            // this.zzz.splice(9);
            // console.log(this.zzz);
            // console.log(res.data.weekData);
            this.ajaxList = res.data.weekData;
            return res.data.weekData;
          })
          .catch(function (error) {
            alert("获取失败，请稍后重试");
            console.log(error);
          });
      },
                ajax2(url) {
            url = "http://121.41.51.182:3000/personalized/newsong";
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
            })
                .then((res) => {
                    this.dataList = JSON.parse(res.request.response).result.slice(0, (this.offset1 += 20));
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
    },
  };
</script>

<style scoped>
.text {
  /* display: inline; */
  text-align: center;
}

#num {
  float: left;
  margin: 25px 20px;
}

/* .main { */
/* position: relative; */
/* top: -25px; */
/* } */
/* .gray { */
/* position: relative; */

/* } */
.themore {
  height: 90px;
  display: block;
}

img {
  width: 140px;
  float: left;
  /* display: inline; */
}

.img-warpping {
  display: inline;
}
</style>
